<template>
    <el-menu router unique-opened :default-active="$route.path" background-color="#304156" text-color="#fff"
        active-text-color="#ffd04b">
        <div class="index">
            <img src="../../assets/images/logo.png">
            <h4>傲马外卖平台</h4>
        </div>
        <!-- 后台首页 -->
        <el-menu-item index="/index">
            <i class="el-icon-s-home"></i>
            <span slot="title">后台首页</span>
        </el-menu-item>
        <!-- 订单管理 -->
        <el-menu-item index="/order">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
        </el-menu-item>
        <!-- 店铺管理 -->
        <el-menu-item index="/shop">
            <i class="el-icon-s-shop"></i>
            <span slot="title">店铺管理</span>
        </el-menu-item>
        <!-- 商品管理 -->
        <el-submenu index="/goods">
            <template slot="title">
                <i class="el-icon-s-goods"></i>
                <span>商品管理</span>
            </template>
            <el-menu-item index="/goods/list">商品列表</el-menu-item>
            <el-menu-item index="/goods/add">商品添加</el-menu-item>
            <el-menu-item index="/goods/category">商品分类</el-menu-item>
        </el-submenu>
        <!-- 销售统计 -->
        <el-submenu index="/count">
            <template slot="title">
                <i class="el-icon-s-data"></i>
                <span>销售统计</span>
            </template>
            <el-menu-item index="/count/goods">商品统计</el-menu-item>
            <el-menu-item index="/count/order">订单统计</el-menu-item>
        </el-submenu>
        <!-- 账号管理 -->
        <el-submenu index="/account">
            <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>账号管理</span>
            </template>
            <el-menu-item index="/account/list">账号列表</el-menu-item>
            <el-menu-item index="/account/add">账号添加</el-menu-item>
            <el-menu-item index="/account/changepassword">修改密码</el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<style lang="less" scoped>
.index {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

    img {
        width: 50px
    }
}

.el-menu {
    border: 0;

    .el-menu-item {
        min-width: 100px
    }
}
</style>